<template>
  <div>
    <!-- :modal="false" -->
    <el-dialog
      title="常用快捷键使用说明(注意:新建笔记时刷新会导致你的数据丢失)"
      :visible.sync="dialogTableVisible"
      :append-to-body="true"
      width="600px"
      top="5vh"
    >
      <el-table :data="gridData">
        <el-table-column
          property="shortcut"
          label="快捷键"
          width="250"
        ></el-table-column>
        <el-table-column property="func" label="功能"></el-table-column>
      </el-table>
      <br />
      <el-tag type="primary" style="float: right; margin-left: 10px"
        >本提示只在进入页面时显示</el-tag
      >
      <el-tag type="warning" style="float: right"
        >多行空格在预览时只会显示一行</el-tag
      ><br />
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "EditorHelperComponent",
  props: {
    visible: Boolean,
  },
  data() {
    return {
      // 父组件传值
      dialogTableVisible: this.visible,
      gridData: [
        {
          shortcut: "F8",
          func: "开启/关闭导航",
        },
        {
          shortcut: "F9",
          func: "预览/编辑切换",
        },
        {
          shortcut: "F10",
          func: "开启/关闭全屏",
        },
        {
          shortcut: "F11",
          func: "开启/关闭阅读模式",
        },
        {
          shortcut: "F12",
          func: "单栏/双栏切换",
        },
        {
          shortcut: "CTRL + S",
          func: "保存",
        },
        {
          shortcut: "CTRL + D",
          func: "删除选中行",
        },
        {
          shortcut: "CTRL + Z | CTRL + Y",
          func: "上一步 | 下一步",
        },
        {
          shortcut: "SHIFT + TAB",
          func: "取消缩进",
        },
        {
          shortcut: "TAB",
          func: "缩进",
        },
        {
          shortcut: "CTRL + B",
          func: "粗体",
        },
        {
          shortcut: "CTRL + 1 ~ 6",
          func: "标题 1 ~ 6",
        },
      ],
    };
  },
  watch: {
    visible: function (newVal) {
      this.dialogTableVisible = newVal;
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>
